<template>
   <div>
     <h3 ref="myH3">大标题</h3>
     <p ref="p">这是一个p标签</p>
     <button @click="handleGet">点击获取dom元素</button>

     <!-- 组件 -->
     <my-star ref="star"></my-star>

     <button @click="handleComp">点击获取my-star组件</button>
   </div>
</template>

<script>
import MyStar from './components/MyStar.vue'
export default {
  components:{
    MyStar
  },
  methods:{
    handleGet(){
      // 点击的时候，获取h3,p标签，修改他们的文本颜色
      // $event / $emit / $refs  Vue内置
      console.log(this.$refs)
      this.$refs.myH3.style.color = 'orange'
      this.$refs.p.style.color = 'skyblue'
    },
    handleComp(){
      // 通过$refs获取到子组件之后，可以调用子组件内部的方法
      console.log(this.$refs.star)
      this.$refs.star.dance()
      this.$refs.star.sing()

      console.log(this.$refs.star.msg)

      // 父元素可以操作子元素的内容，但是也是不太建议 ，自己的数据自己操作~~
      this.$refs.star.age++

    }

    // 1. 给目标元素添加 ref 属性
    // 2. 通过 this.$refs.xxx 来获取 dom元素

    // 区别： 
    //  1. document.querySelector() ==> 找的是整个html的元素
    //  2. ref和 $refs 是获取的当前组件的元素 
  }
}
</script>

<style>

</style>